import React, { Component } from 'react';
import {Image, View} from '@tarojs/components'
import './rule.scss'
import {http} from '../../utils/http'
import {FROZEN_REPAYMENT_DETAIL, RESOURCE_URL} from '../../constants/api'
import {GetRequest, vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"

interface PageType {
  loadMoreStatus: "more" | "loading" | "noMore"
  recordList: any
}

export default class DebtsDetail extends Component {
  state: PageType = {
    loadMoreStatus: 'loading',
    recordList: []
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      this.page++
      const recordList = await this.getData(this.page)
      const old = this.state.recordList
      if (recordList) {
        this.setState({recordList: [...old, ...recordList]})
      }
    }
  }

  page = 1

  uuid
  async componentDidShow() {
    vcmonitor(this)
    this.page = 1
    this.uuid = Taro.getCurrentInstance().router.params.uuid || ''
    const recordList = await this.getData(this.page)
    this.setState({recordList})
  }

  async getData(page) {
    const recordList = await http.HPost(FROZEN_REPAYMENT_DETAIL, {page, limit: 10, uuid: this.uuid})
    if (recordList.data && recordList.data.length >= 10) {
      this.setState({loadMoreStatus: 'more'})
    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    return recordList.data || []
  }

  render() {
    const {recordList} = this.state
    return (
      <View className='rule-page-root'>
        <GzhAuth />
        {recordList && recordList.map(item => <View className='item'>
          <View className='title'>{item.no}
            {item.product_name && <View className='debts-product-name'>{item.product_name}</View>}
            {item.subject && <View className='debts-subject'>{item.subject}</View>}
            <View className='time debts-time'>{item.add_date}</View>
          </View>
          <View className={(item.subject && item.subject === '还款') ? "total_amount yellow" : "total_amount"}>{(item.subject && item.subject === '还款' && '-')}{item.money}</View>
        </View>)}
        {recordList.length <= 0 && <View className='listNull'>
          <Image src={`${RESOURCE_URL}/upload/images/20211112/1636708674979_153.png`} mode='widthFix' />
          <View className='text'>暂无数据</View>
        </View>}
      </View>
    )
  }
}
